【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応
みなさんこんにちは、高速化やSCSSの記事を書いている野中です。
↑の絵が何かわかる人いますか？
マインクラフト(Minecraft)界隈でおなじみの愛されキャラ「匠」こと「クリーパー」さんです。
とっても長い前振りなので時間のない方は本題まですっ飛ばしてください。
マインクラフトとは
わかりやすく解説されているニコニコ大百科を引用。
Minecraft（マインクラフト）とは、Notch（Markus Persson氏）と氏の会社であるMojangからリリースされた、サンドボックス型のものづくりゲームである。
ニコニコ大百科：Minecraft
レトロゲーを想起させるドットテイストの3Dブロックが溢れる世界で、建物やその他のものを自由に創造することが出来るゲーム。
家を作ったり、川を作ったり、山をつくったり、洞窟を作ったり、トロッコ坑道を作ったり、ゾンビを倒すためのトラップを作ったり、塔を作ったり、農場を作ったり、天空の城を作ったり、地球を作ったり…何でも出来る。
ちなみにクリーパーとはこれのこと。
会社のロゴの後ろに村がありますが、あれがクラスメソッド株式会社ではありません。
クリーパーは無音でプレイヤーに近づき、「シュッー」という効果音と共に数秒後爆発します。
プレイヤーの誰しもが一度は彼の洗礼を受けていることから、畏敬の念をこめて「クリーパー様」｢クリーパーさん｣｢先生｣と呼ばれることがある。また、爆発によって自宅や建造物を強制的にリフォームしてくれることから某番組よろしく「匠」とも呼ばれたりする。
ニコニコ大百科：クリーパー
ちなみにMincraftはPC, XBOX360, iOS, Androidでプレイできます。
JINXにたくさんグッズが売っているので興味のある方はどうぞ。
前振り長すぎですがこの緩さがブログの良いところですね。他の寄稿するような媒体では書いても削除されるはず・・・。
本題、Webフォントアイコンとは
やっと本題ですが、Webサイトを作る際にアイコンってよく使いますよね？
ここで指すアイコンとは緩いピクトグラムを指します（以降はわかりやすいアイコンという名称を使います）。
ちなみにピクトグラムとは・・・
ピクトグラム（Pictogram、ピクトグラフ（Pictograph）とも）は、一般に「絵文字」「絵単語」などと呼ばれ、何らかの情報や注意を示すために表示される視覚記号（サイン）の一つである。地と図に明度差のある2色を用いて、表したい概念を単純な図として表現する技法が用いられる。
Wikipedia:ピクトグラム
アイコンってよく使うけれども、画像にすると書き出したサイズ以上には拡大できない（しない方が良い）しCSS Spriteで対応するのも何かと面倒。
特にhover時のアイコンまで考えだすと大変だしめんどくさい。
そこで1つの解決策となるアイコンのWebフォント化です。
アイコンをWebフォントにすることで、ベクターの軽量なデータが利用でき、複数のアイコンを1つにまとめられ、hoverやactiveなど状態の変更が容易です。
ちなみにgithubがやっていて興味を持ったのですが、こんな風に拡大しても美しい。
そこで自分で試行錯誤しながらフォントを作成し、Webフォント化してみた過程を紹介します。
前編の紹介内容
前編となる今回は冒頭で紹介したマインクラフトの「匠の顔」を試しにアイコンにしてフォント化してみたいと思います。
ちなみに環境はWindowsで解説します。
MacOSの解説は別の機会で紹介できたらよいなと思います。
1，アイコンを作成してSVG形式で保存
まずはフォント化したいアイコンを作ります。
ツールは問いません。今回はイラストレーターでちゃちゃっとトレースして匠を作ります。
1.1，必要ないけどSVGをHTMLに読み込んでみる
こんな感じのベクターデータができあがります。古いブラウザは見られないかも。
<object data="https://cdn-ssl-devio-img.classmethod.jp/wp-content/uploads/2013/03/creeper.svg" type="image/svg+xml"></object>
これで素材の準備はできたので、フォント作成に移りましょう。
2，30日間無料で使えるTTEditを使ってフォント作成
TTEditは有償のソフトウェアです。30日間無料で機能制限もなく利用できるのでまずは試しにダウンロードしてインストールしてみましょう。
ちなみに8,000円で購入できます。
2.1，インストール
インストールはとても簡単なので以下の手順に従ってください。
2.2，TTEditの起動
インストールが完了したらWindowsキーを押してプログラムとファイルの検索にTTEditと入力しましょう。
起動したら試用期間で利用するボタンを押して作業を開始します。
起動直後の画面。
2.3，フォントファイルの新規作成
ファイルの設定手続きをそれっぽく進めます。
正直ここらへんの違いは自分も理解できていないので正しい情報だとは思わないでください。
フォント名は好きなフォント名を入力してください。
ちなみに僕はCreeperフォントにします。
2.4，SVGデータをインポートしてフォントを作成
フォントを作り始めます。
先ほど作ったSVGファイルを「ファイル」→「インポート」→「SVGファイル」で読み込みます。
とりあえず読み込めたようです。
真ん中に寄せて文字部分を塗りつぶして真ん中に寄せます。
「ファイル」→「名前をつけて保存」とりあえず保存してみる。
フォントをプレビューして確認してみましょう。
なにか表示されていますね。
ためしにインストールボタンを押してインストールしてみます。
3，インストールして使えるのかイラストレーターでチェックしてみる
イラストレーターを再起動して先ほどインストールしたフォントが使えるか試してみます。
起動して適当に「A」と入力してみましょう。
先ほど作成したフォントに変更してみましょう。
Creeperフォントがちゃんと表示されていますね。
実は先ほど適当にフォントを作りましたが、フォントにはShift-JIS（SJIS）やJIS,Unicodeなど文字コードを表す形式がいくつかあります。
先ほど作ったクリーパーの顔はAというコードSJISの40+1、JISの40+1、UnicodeのF040+1というなんの文字なのかを表すコードが指定されています。Unicodeについては正直、あまり理解できていません。理解するにはそれなりに勉強が必要だと思います。
Shift-JISのコードはこちらが参考になります。
できあがった匠顔フォントはこちら
誰も使わないと思いますが一応成果物としてここに残しておきます。
物好きな方がいればダウンロードしてみてください。
まとめ
単純なものならそれっぽくできましたがおそらくもっと考えなければならないことが沢山あるんじゃないかと思います。
より良く作るにはフォントに関する知識とツールの使い方も覚える必要がありそうですね。
今回はここまでにして、次回Webフォント化と簡単に利用できるジェネレーター系ツールを合わせて紹介したいと思います。
